

//需要监控的数据的集合
var parmList = [];
//存放所有的chart对象
var allCharts = {};
//存放所有监控数据的队列的JSON
var allArray = {};
//存放所有数据状态的JSON，当对应项为true（检测前和检测后数据都到了）时才能输出
var dataFlag = {};
//存放数据达标状态
var dataState = {};
//客户公司识别码
var companyCode;
//客户信息
var loginUser;

var stateMap = {"error":"#FFE3E3","warning":"#FFF9DB","normal":"#FAFAFA"};

//传值
function setParmList(list,user) {
	loginUser = user;
	parmList = list;
    companyCode = $("#realData-companyCode").text();
	if (companyCode.length != 0) {
        initCharts();
        WebSocketTest();
    }
}

//初始化原始图表
function initOption(parm) {
    allCharts[parm.eName].setOption({
        color:['#FF0000','#01B468','#4472C5','#ED7C30','#FF8096','#800080'],
        title: [{
            left:200,
            text: parm.name
        },{
            left:300,
        	text:parm.unit
		}],
        animation: false,
        tooltip: {},
        legend: {
            data:['处理前',"处理后"],
        },
        xAxis: {
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            data: []
        },
        yAxis: {
            scale: true,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
        },
        grid: {
            top:55,
            left: 20,
            right: 10,
            bottom: 25,
            width:'auto',
            height:'auto'
        },
        series: [
            {
                name: '处理前',
                type: 'line',
                itemStyle: {
                    normal: {
                        label:{
                            show: true,
                        },
                    },
                    lineStyle:{
                        color:'#FF0000'
                    }
                },
                data: [0]
            },
            {
                name: '处理后',
                type: 'line',
                itemStyle: {
                    normal: {
                        label:{
                            show: true,
                        },
                    },
                    lineStyle:{
                        color:'#01B468'
                    }
                },
                data: [0]
            },
        ]
    });
}

//初始化所有的echart图表
function initCharts() {
	var eName = null;
    for (var i = 0; i < parmList.length; i++) {
    	eName = parmList[i].eName;
        allCharts[eName] = echarts.init(document.getElementById('realeTime_'+eName));
        initOption(parmList[i]);
        window.onresize = allCharts[eName].resize;
    }
    //给窗口添加自适应
    window.onresize = function(){
        for (var val in allCharts) {
            allCharts[val].resize();
        }
    }
}
		
// //从JSON数据中分理出time字段的数据
// function getTimeArray(array){
// 	var time = null;
// 	var timeArray = [];
// 	for(var i=0;i<array.length;i++){
// 		try{
// 			time = array[i].time;
// 			timeArray[i] = time.substring(11,20)
// 		}
// 		catch(err){
// 			time = "--";
// 		}
// 		// console.log(console.log(time.substring(11,20)));
// 	}
// 	return timeArray;
// }
//
// //从JSON数据中分离出data字段的数据
// function getDataArray(array){
// 	var data = null;
// 	var dataArray = [];
// 	for(var i=0;i<array.length;i++){
// 		try{
// 			data = array[i].data;
// 			dataArray[i] = data;
// 		}
// 		catch(err){
// 			data = 0;
// 		}
// 		// console.log(console.log(time.substring(11,20)));
// 	}
// 	return dataArray;
// }

//更新表数据
function updateChartData(parmName) {
    $("#card_realeTime_"+parmName+"").css("background",stateMap[dataState[parmName]]);
    echarts.getInstanceByDom(document.getElementById('realeTime_'+parmName)).setOption({
    	xAxis: {
    		data: allArray[parmName + "_" + true ].timeList
    	},
    	series: [
    		{
    			name:'处理前',
    			//在所有数据中查找对应的队列，并按照顺序获得数据
    			data:allArray[parmName + "_" + false].datasList,
    		},
    		{
    			name:'处理后',
    			data:allArray[parmName + "_" + true].datasList,
    		}
    	]
    });
}
		  
function WebSocketTest() {
	if ("WebSocket" in window)
	{
		// alert("您的浏览器支持 WebSocket!");
               
		// 打开一个 web socket
		var ws = new WebSocket("ws://localhost:8088/websocket/serialData/web-" + companyCode + "-" + loginUser.username);

		//当有消息来的时候
		ws.onmessage = function (evt) {
			var data = JSON.parse(evt.data);
			var parmName = data.parmName;
            var isHandled = data.isHandled
            var queueName = parmName + "_" + isHandled;
            allArray[queueName] = data.sequenceQueue;
            if (isHandled){
            	dataState[parmName] = data.dataState;
			}
            if (dataFlag[parmName] != null){
                dataFlag[parmName] = !dataFlag[parmName];
            }
            else {
                dataFlag[parmName] = false;
            }
					
			try{
                //如果此时这个数据的状态为true,就更新对应的图表
                if(dataFlag[parmName]){
                    // console.log(dataFlag[realdata.parm] + "更新图表");
                    updateChartData(parmName);
                }
			}
			catch(err){}
				
			// queue.pop();
			// console.log(queue.sequenceQuere());
		};
                
		ws.onclose = function()
		{
			// 关闭 websocket
			alert("连接已关闭...");
		};
	}
            
	else {
		// 浏览器不支持 WebSocket
		alert("您的浏览器不支持 WebSocket!");
	}
}

		 
		 